<template>
	<view class="kui-icons">
		<template v-if="prefix == 'remix'">
			<text class="icons-remix" :style="{
		  '--content': content
		}"></text>
		</template>
		<template v-if="prefix == 'boot'">
			<text :class="`bi bi-${type}`" :style="{
			fontSize: `${size}rpx`,
			color: `${data.color}`,
			fontWeight: `${weight}`
		}"></text>
		</template>
		<template v-if="prefix == 'astic'">
			<text class="kui-relative" :class="`fontastic icon-${type}`" :style="{
			fontSize: `${size}rpx`,
			color: `${data.color}`,
			fontWeight: `${weight}`,
			top: `${data.top}rpx`
		}"></text>
		</template>
		<template v-if="prefix == 'svg2base64'">
			<text class="svg2base64" :style="{
				'--content': content
			}"></text>
		</template>
		<template v-if="prefix == 'ico'">
			<text class="kui-relative" :class="`icomoon icon-${type}`" :style="{
				fontSize: `${size}rpx`,
				color: `${data.color}`,
				fontWeight: `${weight}`,
				top: `${data.top}rpx`
			}"></text>
		</template>
	</view>
</template>

<script lang="ts">
	// import * as colorUtils from '@/common/color/index.js';

	/**
	 * Icons 图标组件
	 * @description 自定义图标组件，用于页面字体图标展示
	 * @property {String} type 图标图案
	 * @property {Number} size 图标大小
	 * @property {String} color 图标颜色
	 * @property {String} mode = [light/dark/system] 页面模式
	 * 	@value light 亮色模式
	 * 	@value dark 暗色模式
	 * 	@value system 跟随系统
	 * @property {String} prefix = [remix/boot/astic/svg2base64]
	 * 	@value remix REMIX ICON [http://www.remixicon.cn]
	 * 	@value boot BootIcon [https://icons.bootcss.com]
	 * 	@value astic fontastic [https://app.fontastic.me]
	 * 	@value svg2base64 base64格式的svg图标代码
	 * @property {String} content 图标内容
	 * @property {Number} top 相对位置
	 * @property {Number} left 相对位置
	 * @template <kui-icons type="image-alt" ：size="30" class="kui-text-gray-300"></kui-icons>
	 */
	import {
		reactive,
		onMounted,
		defineComponent,
		getCurrentInstance,
		watch
	} from "vue";
	
	import IconsProps from './props';
	
	const name = "kui-cell";
	
	export default defineComponent({
		name,
		props: IconsProps,
		setup(props) {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			const data = reactive({
				color: props.color ? props.color : "#000000",
				mode: props.mode,
				top: props.top,
				left: 0
			});
			
			// 图标主题色
			data.color = props.theme ? theme.colors[props.mode][props.theme][5] : data.color;
			
			const init = () => {
				data.color =
					data.mode === "light" ?
					data.color ?
					data.color :
					"#000000" :
					uni.kviewUIColor.generate(data.color, {
						dark: true,
						list: false,
						index: 6,
					});
			};
			
			const changeMode = () => {
				data.color =
					data.mode === "light" ?
					props.color ?
					props.color :
					"#000000" :
					props.color ?
					uni.kviewUIColor.generate(data.color, {
						dark: true,
						list: false,
						index: 6,
					}) :
					"#FFFFFF";
			};
						
			onMounted(() => {
				init();
				// 监听暗黑模式
				uni.$on('changeMode', (e) => {
					// this.setMode = e;
					data.mode = e;
					changeMode();
				})
			});
			
			watch(
				() => [props.color],
				(newVal) => {
					data.color = newVal[0]
				}
			);
			
			return {
				data,
				init,
				changeMode
			}
		}
	});
</script>

<style scoped lang="less">
	// @import "@/common/css/iconsforicomoon.css";
	.kui-icons {
		font-size: 0px;
	}
	.icons-remix {
		&::before {
			content: var(--content);
			font-smooth: antialiased;
			position: relative;
			top: 4rpx;
		}
	}
	.svg2base64 {
		&::before {
			content: var(--content);
			position: relative;
			top: 6rpx;
		}
	}
</style>
